<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.css" />
		<!--<script src="echarts.js" type="text/javascript" charset="utf-8"></script>-->
	</head>

	<body>
		<div id="main1" style="width:800px;height:300px;border: 1px solid #EEE;"></div>
		<div id="main" style="width:800px;height:300px;border: 1px solid #EEE;"></div>
		<div id="zmain" style="width:800px;height:300px;border: 1px solid #EEE;"></div>
		<div id="main2" style="width:800px;height:300px;border: 1px solid #EEE;"></div>
		<script src="../jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/macarons.js" type="text/javascript" charset="utf-8"></script>
		<script src="echarts-data.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="skin/dark.js" type="text/javascript" charset="utf-8"></script>-->

		<script>
			// 基于准备好的dom，初始化echarts实例
			var myChart1 = echarts.init(document.getElementById('main1'), 'macarons');
			myChart1.showLoading({
				text: '正在努力的读取数据中...', //loading
			});

			// 指定图表的配置项和数据
			var option = {
				title: {
					text: 'ECharts 入门示例',
					x: 'center'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['销量1', '销量2', '销量3'],
					bottom: 10
						//              x: 'left'
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				},
				yAxis: {},
				series: [{
					name: '销量1',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}, {
					name: '销量2',
					type: 'bar',
					data: [25, 220, 236, 210, 210, 220]
				}, {
					name: '销量3',
					type: 'bar',
					data: [35, 320, 336, 310, 310, 320]
				}]
			};
			myChart1.hideLoading();
			// 使用刚指定的配置项和数据显示图表。
			myChart1.setOption(option);

			var myChart = echarts.init(document.getElementById('main'), 'macarons');
			myChart.showLoading({
				text: '正在努力的读取数据中...', //loading
			});
			option = {
				title: {
					text: '某站点用户访问来源',
					subtext: '纯属虚构',
					x: 'center'
				},
				tooltip: {
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					bottom: 10,
					data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
				},
				calculable: true,
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: '55%',
					center: ['50%', 10],
					data: [{
						value: 335,
						name: '直接访问'
					}, {
						value: 310,
						name: '邮件营销'
					}, {
						value: 234,
						name: '联盟广告'
					}, {
						value: 135,
						name: '视频广告'
					}, {
						value: 1548,
						name: '搜索引擎'
					}]
				}]
			};
			option = {
				"title": {
					"text": "测试标题",
					"show": true,
					"x": "center"
				},
				"tooltip": {
					"formatter": "{a} <br/>{b} : {c} ({d}%)"
				},
				"legend": {
					"data": ["意见数量", "回复数量", "回复时长"],
					"bottom": 10
				},
				"calculable": true,
				"series": [{
					"name": "投诉",
					"type": "pie",
					"radius": "55%",
					"center": ["50%", "50%"],
					"data": [{
						"value": 20,
						"name": "回复数量"
					}, {
						"value": 10,
						"name": "意见数量"
					}, {
						"value": 30,
						"name": "回复时长"
					}]
				}]
			};
			myChart.hideLoading();
			myChart.setOption(option);

			var myChartz = echarts.init(document.getElementById('zmain'), 'macarons');
			myChartz.showLoading({
				text: '正在努力的读取数据中...', //loading
			});
			option = {
				title: {
					text: '某地区蒸发量和降水量',
					subtext: '纯属虚构',
					x: 'center'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['蒸发量', '降水量'],
					orient: 'vertical',
					x: 'left'
				},
				toolbox: {
					show: true,
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						magicType: {
							show: true,
							type: ['line', 'bar']
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				calculable: true,
				xAxis: [{
					type: 'category',
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
					name: '蒸发量',
					type: 'bar',
					data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}, {
							type: 'min',
							name: '最小值'
						}]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					}
				}, {
					name: '降水量',
					type: 'bar',
					data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
					markPoint: {
						data: [{
							name: '年最高',
							value: 182.2,
							xAxis: 7,
							yAxis: 183,
							symbolSize: 18
						}, {
							name: '年最低',
							value: 2.3,
							xAxis: 11,
							yAxis: 3
						}]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					}
				}]
			};
			myChartz.hideLoading();
			myChartz.setOption(option);
		</script>
	</body>

</html>